<template>
  <div>
    <a-modal
      title="测试SQL语句"
      :visible="visible"
      :width="1000"
      wrapClassName="check-sql-dialog"
      @cancel="handleCancel"
    >
      <a-table
        ref="table"
        size="middle"
        rowKey="testId"
        :scroll="{x:tableWidth, y: tableHeight}"
        bordered
        :pagination="false"
        :columns="columns"
        :dataSource="tableData"
        class="j-table-force-nowrap"
      />

      <template slot="footer">
        <a-button  @click="handleCancel">关闭</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  data() {
    return {
      visible: false,
      tableData: [],
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        }
      ],
      tableWidth: 1000,
      tableHeight: 700
    }
  },
  mounted() {
    // 获取容器当前高度，重设表格的最大高度
    this.getTableMaxHeight()

    window.onresize = () => {
      this.getTableMaxHeight()// 获取容器当前高度，重设表格的最大高度
    }
  },
  methods: {
    show(res) {
      this.tableData = res
      res.map((item, index) => {
        item.testId = index
      })

      const nameArr = Object.getOwnPropertyNames(res[0])
      if (nameArr.length > 5) this.tableWidth = nameArr.length * 200
      nameArr.map(item => {
        if (item !== 'testId') {
          this.columns.push({
            title: item,
            align: 'center',
            width: 200,
            dataIndex: item
          })
        }
      })

      this.visible = true
    },
    handleCancel() {
      this.$emit('cancel')
      this.visible = false
    },
    // 获取容器当前高度，重设表格的最大高度
    getTableMaxHeight() {
      this.$nextTick(() => {
        this.tableHeight = $(window).height() - 200 - 128 - 46
      })
    }
  }
}
</script>
<style lang="less" scoped>
.check-sql-dialog {
  .link-box {
    display: flex;
    height: 70px;
    justify-content: center;

    &>.link-item {
      flex: 1;
      height: 70px;
      text-align: center;
      cursor: pointer;
      padding-top: 5px;

      &.active {
        background-color: rgb(205, 233, 255);
      }
    }
  }

  .column-box {
    margin-top: 10px;

    &>.column-title {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: center;
      background-color: #fafafa;

      &>div {
        height: 30px;
        text-align: center;

        &:nth-of-type(1) {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding: 0 10px;
        }

        &:nth-of-type(2) {
          width: 30px;
          background: url('~@/assets/index/link-icon.png') no-repeat center center;
        }

        &:nth-of-type(3) {
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding: 0 10px;
        }

        &:nth-of-type(4) {
          width: 50px;

          &>i {
            cursor: pointer;
            margin: 0 2px;
            font-size: 16px;
          }
        }
      }
    }

    &>.column-list {
      height: 180px;
      overflow: auto;

      &>.column-item {
        height: 31px;
        line-height: 32px;
        margin-top: 13px;
        display: flex;
        justify-content: center;

        &>div {
        height: 32px;
        text-align: center;
        overflow: hidden;

        &:nth-of-type(1) {
          flex: 1;
        }

        &:nth-of-type(2) {
          width: 30px;
          background: url('~@/assets/index/link-icon.png') no-repeat center center;
        }

        &:nth-of-type(3) {
          flex: 1;
        }

        &:nth-of-type(4) {
          width: 50px;

          &>i {
            cursor: pointer;
            margin: 0 2px;
            font-size: 16px;
          }
        }
      }
      }
    }
  }
}
</style>
<style lang="less">
.check-sql-dialog {
  .ant-modal-body {
    padding: 10px 15px;
    height: calc(100vh - 308px);
  }

  .ant-table-tbody > tr > td {
    max-width: 200px;
    min-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>
